import { ProTable, type ProColumns } from '@/components/Pro';
import {
  loadMonitorControllerGetMeterDevices,
  loadMonitorControllerHistory,
} from '@/services/ess/loadMonitor';
import { useModel } from '@umijs/max';
import dayjs from 'dayjs';
import React, { useEffect, useState } from 'react';

const HistoryData: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const [deviceCodeData, setDeviceCodeData] = useState<any[]>([]);
  useEffect(() => {
    loadMonitorControllerGetMeterDevices({ stationId: initialState?.stationId }).then((res) => {
      if (res.data && res.data.length > 0) {
        setDeviceCodeData(res.data);
      }
    });
  }, []);
  const columns: ProColumns<any>[] = [
    {
      title: '序号',
      key: 'index',
      valueType: 'index',
      fixed: 'left',
      width: 60,
      dataIndex: 'pageIndex',
    },
    {
      title: '负载名称',
      dataIndex: 'deviceCode',
      key: 'deviceCode',
      hideInTable: true,
      fixed: 'left',
      valueType: 'select',
      width: 100,
      fieldProps: {
        placeholder: '请选择负载名称',
        options: deviceCodeData.map((item) => ({ label: item.name, value: item.code })),
      },
    },
    {
      title: '采集时间',
      dataIndex: 'collectTime',
      key: 'collectTime',
      valueType: 'dateTimeRange',
      fixed: 'left',
      width: 100,
      initialValue: [dayjs().startOf('day'), dayjs()],
      render: (_, record) => {
        return <span>{record.ts}</span>;
      },
    },
    {
      title: '上报时间',
      dataIndex: 'reportTime',
      key: 'reportTime',
      valueType: 'dateTimeRange',
      fixed: 'left',
      width: 100,
      initialValue: [dayjs().startOf('day'), dayjs()],
      render: (_, record) => {
        return <span>{record.reportTime}</span>;
      },
    },
    {
      title: '设备型号',
      dataIndex: 'product',
      key: 'product',
      hideInSearch: true,
      width: 100,
    },
    {
      title: '设备厂家',
      dataIndex: 'producer',
      key: 'producer',
      hideInSearch: true,
      width: 100,
    },
    {
      title: '设备ID',
      dataIndex: 'meterCode',
      hideInSearch: true,
      width: 90,
    },
    {
      title: '电网频率(Hz)',
      dataIndex: 'gridFreq',
      hideInSearch: true,
      width: 120,
    },
    {
      title: '功率因数',
      dataIndex: 'powerFactor',
      hideInSearch: true,
      width: 100,
    },
    {
      title: '总有功功率(kW)',
      dataIndex: 'activePower',
      hideInSearch: true,
      width: 135,
    },
    {
      title: '总无功功率(kvar)',
      dataIndex: 'reactivePower',
      hideInSearch: true,
      width: 130,
    },
    {
      title: '总视在功率(kVa)',
      dataIndex: 'apparentPower',
      hideInSearch: true,
      width: 135,
    },
    {
      title: 'A相电流(A)',
      dataIndex: 'ia',
      hideInSearch: true,
      width: 120,
    },
    {
      title: 'B相电流(A)',
      dataIndex: 'ib',
      hideInSearch: true,
      width: 120,
    },
    {
      title: 'C相电流(A)',
      dataIndex: 'ic',
      hideInSearch: true,
      width: 120,
    },
    {
      title: 'A相电压(V)',
      dataIndex: 'ua',
      hideInSearch: true,
      width: 100,
    },
    {
      title: 'B相电压(V)',
      dataIndex: 'ub',
      hideInSearch: true,
      width: 120,
    },
    {
      title: 'C相电压(V)',
      dataIndex: 'uc',
      hideInSearch: true,
      width: 120,
    },
    {
      title: '组合有功总电能(kWh)',
      dataIndex: 'combinedActiveTotal',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '组合有功尖电能(kWh)',
      dataIndex: 'combinedActiveTip',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '组合有功峰电能(kWh)',
      dataIndex: 'combinedActivePeak',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '组合有功平电能(kWh)',
      dataIndex: 'combinedActiveFlat',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '组合有功谷电能(kWh)',
      dataIndex: 'combinedActiveValley',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '正向有功总电能(kWh)',
      dataIndex: 'positiveActiveTotal',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '正向有功尖电能(kWh)',
      dataIndex: 'positiveActiveTip',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '正向有功峰电能(kWh)',
      dataIndex: 'positiveActivePeak',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '正向有功平电能(kWh)',
      dataIndex: 'positiveActiveFlat',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '正向有功谷电能(kWh)',
      dataIndex: 'positiveActiveValley',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '反向有功总电能(kWh)',
      dataIndex: 'reverseActiveTotal',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '反向有功尖电能(kWh)',
      dataIndex: 'reverseActiveTip',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '反向有功峰电能(kWh)',
      dataIndex: 'reverseActivePeak',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '反向有功平电能(kWh)',
      dataIndex: 'reverseActiveFlat',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '反向有功谷电能(kWh)',
      dataIndex: 'reverseActiveValley',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '组合无功总电能(kvarh)',
      dataIndex: 'combinedReactiveTotal',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '组合无功尖电能(kvarh)',
      dataIndex: 'combinedReactiveTip',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '组合无功峰电能(kvarh)',
      dataIndex: 'combinedReactivePeak',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '组合无功平电能(kvarh)',
      dataIndex: 'combinedReactiveFlat',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '组合无功谷电能(kvarh)',
      dataIndex: 'combinedReactiveValley',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '正向无功总电能(kvarh)',
      dataIndex: 'positiveReactiveTotal',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '正向无功尖电能(kvarh)',
      dataIndex: 'positiveReactiveTip',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '正向无功峰电能(kvarh)',
      dataIndex: 'positiveReactivePeak',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '正向无功平电能(kvarh)',
      dataIndex: 'positiveReactiveFlat',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '正向无功谷电能(kvarh)',
      dataIndex: 'positiveReactiveValley',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '反向无功总电能(kvarh)',
      dataIndex: 'reverseReactiveTotal',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '反向无功尖电能(kvarh)',
      dataIndex: 'reverseReactiveTip',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '反向无功峰电能(kvarh)',
      dataIndex: 'reverseReactivePeak',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '反向无功平电能(kvarh)',
      dataIndex: 'reverseReactiveFlat',
      hideInSearch: true,
      width: 180,
    },
    {
      title: '反向无功谷电能(kvarh)',
      dataIndex: 'reverseReactiveValley',
      hideInSearch: true,
      width: 180,
    },
  ];
  const scroll = {
    x: 'max-content',
  };

  return (
    <div style={{ width: '100%' }}>
      <ProTable
        columns={columns}
        scroll={scroll}
        request={async (value) => {
          const params = {
            current: value.current,
            pageSize: value.pageSize,
            deviceCode: value.deviceCode,
            stationId: initialState?.stationId,
            collectStartTime: value.collectTime ? value.collectTime[0] : undefined,
            collectEndTime: value.collectTime ? value.collectTime[1] : undefined,
            reportStartTime: value.reportTime ? value.reportTime[0] : undefined,
            reportEndTime: value.reportTime ? value.reportTime[1] : undefined,
          };
          let reslut = await loadMonitorControllerHistory(params);
          return reslut;
          // return await envDeviceControllerGetHistoryAirCoolData(params);
        }}
        toolBarRender={() => []}
        customToolBarClass="global-tabs-custom-tools"
      ></ProTable>
    </div>
  );
};

export default HistoryData;
